<!--
 * @Descripttion: 上传附件公共组件
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-09 11:16:00
 * @LastEditors: younghxp
 * @LastEditTime: 2022-04-01 09:34:34
-->
<template>
  <div class="uploadBox">
    <template v-if="!(limitationFactor.uploadBtnType === 'typeFour')">
      <el-button
        v-show="
          limitationFactor.uploadBtnType === 'typeOne' ||
          limitationFactor.uploadBtnType === 'typeEight'
        "
        @click="$refs[limitationFactor.fileId].click()"
        class="uploadImg"
        icon="icon iconfont iconshangchuan"
      >
        &nbsp;上传</el-button
      >
      <el-button
        v-show="limitationFactor.uploadBtnType === 'typeTwo'"
        class="commonBut saveBtn"
        icon="icon iconfont iconshangchuan"
        @click="$refs[limitationFactor.fileId].click()"
      >
        <span class="opetareText">上传附件</span>
      </el-button>
      <el-link
        v-show="limitationFactor.uploadBtnType === 'typeThree'"
        type="success"
        class="addUploadImg"
      >
        <i class="icon iconfont iconfujian"></i>
        &nbsp;添加附件
      </el-link>
      <slot name="templatePreview"></slot>
      <span class="uploadImgState">
        <span>{{ limitationFactor.methodTip }}</span>
      </span>
      <div
        :class="[typePage == 'caseDetailLzh' ? 'typePageSty' : '', 'upLoadDom']"
      >
        <form :id="limitationFactor.uploadFormId">
          <input
            type="file"
            :id="limitationFactor.fileId"
            :ref="limitationFactor.fileId"
            name="file"
            @change="fileChange"
          />
        </form>
      </div>
    </template>
    <template v-if="limitationFactor.uploadBtnType === 'typeFour'">
      <el-button
        v-for="(v, i) in annexType"
        :key="i"
        class="commonBut saveBtn butSty"
        @click="$refs[limitationFactor.fileId[i]].click()"
        >{{ '上传' + v.name }}</el-button
      >
      <p class="uploadImgState" style="margin-top: 10px; margin-left: 0">
        <span>{{ limitationFactor.methodTip }}</span>
      </p>
      <div class="upLoadDom">
        <form :id="limitationFactor.uploadFormId[2]" style="float: left">
          <input
            type="file"
            :id="limitationFactor.fileId[2]"
            :ref="limitationFactor.fileId[2]"
            style="width: 136px; margin-left: 16px"
            name="file"
            @change="fileChange(e, annexType[2].code)"
          />
        </form>
        <form :id="limitationFactor.uploadFormId[1]" style="float: left">
          <input
            type="file"
            :id="limitationFactor.fileId[1]"
            :ref="limitationFactor.fileId[1]"
            style="width: 136px; margin-left: 16px"
            name="file"
            @change="fileChange(e, annexType[1].code)"
          />
        </form>
        <form :id="limitationFactor.uploadFormId[0]" style="float: left">
          <input
            type="file"
            :id="limitationFactor.fileId[0]"
            :ref="limitationFactor.fileId[0]"
            style="width: 136px"
            name="file"
            @change="fileChange(e, annexType[0].code)"
          />
        </form>
      </div>
    </template>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'uploadAnnex',
  props: {
    limitationFactor: {
      type: Object,
      default: function () {
        return {}
      },
    },
    upLoadFile: {
      type: Array,
      default: function () {
        return []
      },
    },
    typePage: {
      type: String,
    },
    detailId: {
      type: String,
    },
  },
  data() {
    return {
      fileList: {
        srcList: [],
        oldSrcList: [],
      },
      annexType: [],
    }
  },
  created() {
    if (this.limitationFactor.uploadBtnType === 'typeFour') {
      this.annexType[0] = {
        name: '考勤表',
        code: 'SALARY_ATT',
      }
      this.annexType[1] = {
        name: '银行回执单',
        code: 'SALARY_RECEIPT',
      }
      this.annexType[2] = {
        name: '工人签字确认表',
        code: 'SALARY_SIGN',
      }
    }
  },
  methods: {
    fileChange(e, remark) {
      var Filedata
      var file
      var fileSize
      let refName = null
      let uploadForm = null
      if (!remark) {
        refName = this.limitationFactor.fileId
        uploadForm = this.limitationFactor.uploadFormId
      } else {
        refName =
          remark === 'SALARY_ATT'
            ? this.limitationFactor.fileId[0]
            : remark === 'SALARY_SIGN'
            ? this.limitationFactor.fileId[2]
            : this.limitationFactor.fileId[1]
        uploadForm =
          remark === 'SALARY_ATT'
            ? this.limitationFactor.uploadFormId[0]
            : remark === 'SALARY_SIGN'
            ? this.limitationFactor.uploadFormId[2]
            : this.limitationFactor.uploadFormId[1]
      }
      Filedata = this.$refs[refName].value
      if (!Filedata) {
        return
      }
      try {
        file = this.$refs[refName].files[0]
        fileSize = (file.size / 1024).toFixed(0)
      } catch (e) {
        this.$message({
          message:
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过5M，建议使用FireFox、Chrome或IE10以上浏览器。',
          type: 'warning',
        })
      }
      // 文件大小和限制类型可以通过子组件传值区分，若不适应于使用页面，可自行判断
      if (
        this.limitationFactor.upLoadFileLength &&
        this.upLoadFile.length >= this.limitationFactor.upLoadFileLength
      ) {
        this.$message({
          message: `最多上传${this.limitationFactor.upLoadFileLength}个附件`,
          type: 'warning',
        })
        this.$refs[refName].value = ''
        return
      }
      if (fileSize / 1 > 1024 * this.limitationFactor.fileSize) {
        this.$message({
          message: `${this.limitationFactor.messagetip}`,
          type: 'warning',
        })
        this.$refs[refName].value = ''
        return
      }
      if (this.limitationFactor.formatType == 'typeOne') {
        if (!/\.(png|jpg|jpeg|PNG|JPG|JPEG)$/.test(Filedata)) {
          this.$message({
            message: `${this.limitationFactor.messagetip}`,
            type: 'warning',
          })
          //   $("#" + refName).val("");
          this.$refs[refName].value = ''
          return
        }
      } else if (this.limitationFactor.formatType == 'typeTwo') {
        if (!/\.(doc|docx|pdf)$/.test(Filedata)) {
          this.$message({
            message: `${this.limitationFactor.messagetip}`,
            type: 'warning',
          })
          this.$refs[refName].value = ''
          return
        }
      } else if (this.limitationFactor.formatType == 'typeThree') {
        if (!/\.(doc|docx|xls|xlsx|txt|rar|zip|jpg|png)$/.test(Filedata)) {
          this.$message({
            message: `${this.limitationFactor.messagetip}`,
            type: 'warning',
          })
          this.$refs[refName].value = ''
          return
        }
      } else if (this.limitationFactor.formatType == 'typeFour') {
        if (
          !/\.(jpg|png|jpeg|JPG|PNG|JPEG|PDF|doc|docx|xls|xlsx|pdf)$/.test(
            Filedata
          )
        ) {
          this.$message({
            message: `${this.limitationFactor.messagetip}`,
            type: 'warning',
          })
          this.$refs[refName].value = ''
          return
        }
      } else if (this.limitationFactor.formatType == 'typeFive') {
        if (!/\.(jpg|png|jpeg|JPG|PNG|JPEG|PDF|pdf)$/.test(Filedata)) {
          this.$message({
            message: `${this.limitationFactor.messagetip}`,
            type: 'warning',
          })
          this.$refs[refName].value = ''
          return
        }
      } else if (this.limitationFactor.formatType == 'typeSix') {
        if (
          !/\.(jpg|png|jpeg|JPG|PNG|JPEG|PDF|doc|docx|xls|xlsx|pdf|zip|rar)$/.test(
            Filedata
          )
        ) {
          this.$message({
            message: `${this.limitationFactor.messagetip}`,
            type: 'warning',
          })
          this.$refs[refName].value = ''
          return
        }
      } else if (
        this.limitationFactor.formatType == 'typeSeven' ||
        this.limitationFactor.formatType == 'typeEight'
      ) {
        if (!/\.(doc|docx|xls|xlsx|txt|rar|zip|jpg|png|pdf)$/.test(Filedata)) {
          this.$message({
            message: `${this.limitationFactor.messagetip}`,
            type: 'warning',
          })
          this.$refs[refName].value = ''
          return
        }
      }
      let that = this
      let _refName = null
      if (!remark) {
        _refName = that.limitationFactor.fileId
      } else {
        _refName =
          remark === 'SALARY_ATT'
            ? that.limitationFactor.fileId[0]
            : remark === 'SALARY_SIGN'
            ? that.limitationFactor.fileId[2]
            : that.limitationFactor.fileId[1]
      }
      var options = {
        url: common.uploadUrl + that.limitationFactor.uploadAnnexUrl,
        type: 'POST',
        dataType: 'json',
        data: { source: this.detailId ? this.detailId : '' },
        success: function (data) {
          if (remark) {
            let item = that.annexType.find((v) => v.code === remark)
            Object.assign(data, {
              remark,
              newName: item.name,
            })
          }
          if (that.limitationFactor.UploadType == 'typeTwo') {
            that.upLoadFile = data
          } else {
            that.upLoadFile.push(data)
          }
          that.$emit('getFileList', data.url)
          that.$emit('getFile', that.upLoadFile)
          that.$refs[_refName].value = ''
        },
        error: function () {},
      }
      $('#' + uploadForm).ajaxSubmit(options)
      return false
    },
  },
}
</script>

<style scoped lang="less">
.uploadBox {
  position: relative;
  .el-button {
    margin-left: 0;
  }
  .uploadImg {
    width: 96px;
    height: 36px;
    color: #009588;
    border: 1px solid #009588;
    line-height: 10px;
  }
  .uploadImgState {
    margin-top: 8px;
    line-height: 18px;
    display: block;
    font-size: 14px;
    color: #999999;
  }
  .upLoadDom {
    display: none;
    input {
      width: 130px;
      height: 38px;
      cursor: pointer;
    }
  }
  .typePageSty {
    left: 120px;
  }
  .customBtn {
    width: 120px;
  }
}
.addUploadImg {
  width: 96px;
  height: 36px;
  color: #009588;
  border: 0px solid #009588;
  line-height: 10px;
  &:hover {
    cursor: pointer;
  }
}
.butSty {
  margin-left: 12px !important;
  &:nth-of-type(1) {
    margin-left: 0 !important;
  }
}
</style>
